<template>
  <el-dialog title="选择附件" v-model="isShowDialog"
             width="1200px" :close-on-click-modal="false">
    <div class="content-wrap">
      <div class="left-warp">
        <el-radio-group v-model="sourceType" style="margin-bottom: 10px" @change="handleSourceTypeChange">
          <el-radio-button value="local">本地库</el-radio-button>
          <el-radio-button value="hwobs">华为云OBS</el-radio-button>
        </el-radio-group>
        <el-input
            v-model="filterText"
            placeholder="文件夹过滤"
        />
        <div class="dic-tree-wrap">
          <el-tree
              ref="treeRef"
              style="max-width: 400px"
              class="filter-tree"
              :data="dics"
              :props="defaultProps"
              :highlight-current="true"
              default-expand-all
              :filter-node-method="filterNode"
              @nodeClick="getNodeData"
          />
        </div>
      </div>
      <div class="right-warp">
        <div class="list-wrap2">
          <DirectoryItem
              ref="directoryItemRef"
              :list="files"
              :source="sourceType"
              :folder="queryParams"
              :addable="true"
              :selectable="true"
              @showGallery="showGallery"
              @callback="getFiles"/>
        </div>
        <div class="list-pagination">
          <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              v-model:current-page="queryParams.pageNum"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[20, 30, 50]"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
        </div>
      </div>
    </div>
    <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSelectedFiles" size="default">选择</el-button>
				</span>
    </template>
    <vue-easy-lightbox
        :visible="visibleRef"
        :imgs="imgs"
        :index="indexRef"
        @hide="onGalleryHide">
    </vue-easy-lightbox>
  </el-dialog>
</template>

<script lang="ts">
import {reactive, toRefs, defineComponent, nextTick, ref, watch} from 'vue';
import {ElTree} from "element-plus";
import Tree from "/@/views/pages/tree/index.vue";
import {getDirectoryTree, getOnlyFileList} from "/@/api/attachment";
import DirectoryItem from "/@/views/attachment/local/component/directoryItem.vue";
import VueEasyLightbox from "vue-easy-lightbox";

export default defineComponent({
  name: 'apiV1AttachmentSelect',
  components: {VueEasyLightbox, DirectoryItem},
  props: {
    source: {
      type: String,
      default: () => 'local',
    }
  },
  setup(props, {emit}) {
    const visibleRef = ref(false)
    const directoryItemRef = ref()
    const indexRef = ref(0)
    const imgs = ref([]);
    const treeRef = ref<InstanceType<typeof ElTree>>();
    const defaultProps = {
      children: 'children',
      label: 'label',
    };
    const filterText = ref('');
    const state = reactive({
      loading: false,
      isShowDialog: false,
      queryParams: {
        keywords: null,
        directoryId: 0,
        directoryName: '',
        pageNum: 1,
        pageSize: 18,
      },
      files: [],
      total: 0,
      dics: [],
      sourceType: 'local'
    });
    watch(filterText, (val) => {
      treeRef.value!.filter(val)
    })

    const filterNode = (value: string, data: Tree) => {
      if (!value) return true
      return data.label.includes(value)
    }
    const openDialog = (row: any) => {
      getDicsTree(state.sourceType);
      nextTick(() => {
        state.isShowDialog = true;
        state.loading = false;
      })
    };
    const getDicsTree = (_source: string) => {
      getDirectoryTree({type: _source}).then(res => {
        state.dics = res.data;
        if (state.dics.length > 0) {
          state.queryParams.directoryId = state.dics[0].id;
          getFiles();
        }
      });
    };
    const getFiles = () => {
      let _query = state.queryParams;
      _query.type = state.sourceType;
      getOnlyFileList(_query).then(res => {
        state.files = res.data.list;
        let _imgs = []
        state.files.forEach((item, index) => {
          item.selected = false;
          if (item.type == 'photo') {
            _imgs.push(item.bigSrc);
          }
        });
        imgs.value = _imgs;
        state.total = res.data.total;
        state.queryParams.pageNum = res.data.pageNum;
        state.queryParams.pageSize = res.data.pageSize;
      })
    };
    const showGallery = (_src: string) => {
      for (const i in imgs.value) {
        if (imgs.value[i] == _src) {
          indexRef.value = Number(i);
          break;
        }
      }
      visibleRef.value = true
    };
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    const onSelectedFiles = () => {
      const _list = directoryItemRef.value.getCheckedList();
      emit("callback", _list);
      closeDialog();
    };
    const onCancel = () => {
      closeDialog();
    };
    const handleSizeChange = (_size: number) => {
      state.queryParams.pageNum = 1
      state.queryParams.pageSize = _size
      getFiles();
    };
    const handleCurrentChange = (_page: number) => {
      state.queryParams.pageNum = _page
      getFiles();
    };
    const onGalleryHide = () => {
      visibleRef.value = false
    };
    const getNodeData = (_data: any) => {
      if (_data !== null) {
        state.queryParams.directoryId = _data.id
        state.queryParams.directoryName = _data.label
        nextTick(() => {
          getFiles()
        })
      }
    };
    const handleSourceTypeChange = (_val: any) => {
      getDicsTree(_val);
    }
    return {
      directoryItemRef,
      visibleRef,
      indexRef,
      imgs,
      filterText,
      defaultProps,
      treeRef,
      openDialog,
      closeDialog,
      onCancel,
      onSelectedFiles,
      filterNode,
      ...toRefs(state),
      getFiles,
      showGallery,
      onGalleryHide,
      handleSizeChange,
      handleCurrentChange,
      getNodeData,
      handleSourceTypeChange,
    };
  },
});
</script>
<style scoped lang="scss">
.content-wrap {
  position: relative;
  height: 600px;

  .left-warp {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 600px;
    background-color: #ffffff;
    padding-right: 10px;

    .el-input {
      width: 100%;
      margin-bottom: 10px;
    }

    .dic-tree-wrap {
      height: 520px;
      overflow-x: auto;
      overflow-y: auto;
    }
  }

  .right-warp {
    padding-left: 220px;
    display: block;
    height: 600px;
    overflow-y: auto;

    .list-wrap2 {
      min-height: 550px;

      .list-wrap {
        min-height: 550px !important;
      }
    }
  }
}
</style>
